<template>
  <div class="app-container" >

    <div  style="min-height: 1124px">
      <div >
        <el-card>
          <div style="display: flex;margin: 20px;">
            <el-image src="https://edu-remains.oss-cn-beijing.aliyuncs.com/2022/08/06/f9b3724bdea44602bb7d8c080268c3abdept3_logo_x1.png" style="width: 300px"></el-image>
            <h1 style=" position: relative;left: 40px">会议室预约系统</h1>
            <!--      <span style=" margin-left: 440px">remains</span>-->
          </div>
        </el-card>
        <div style="background: #f1f2f5">
          <el-row :gutter="20" >
            <el-col :span="22">
              <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" style="background: #f1f2f5">
                <el-menu-item index="1" >首页</el-menu-item>
                <el-menu-item index="2">查询空闲资源</el-menu-item>
                <el-menu-item index="3">预约记录</el-menu-item>
                <el-menu-item index="4" >修改个人信息</el-menu-item>
                <!--        <span style="position: relative;left: 800px">qwewqe</span>-->
              </el-menu>
            </el-col>
            <el-col :span="2" >
              <span style="font-size: 12px ">当前用户：{{ user.name }}</span>
              <el-button type="danger" @click="logout"  size="mini" round> 退出登录</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
      <div>
        <nuxt-child></nuxt-child>
      </div>
    </div>


    <div class="gcs-footer">

      <div class="footer-top">

        <a href="#">百度网</a> |

        <a href="#">新浪网</a> |

        <a href="#">腾迅房产</a> |

        <a href="#">找货网</a> |

        <a href="#">北极绒</a> |

        <a href="#">阿里巴巴</a> |

      </div>

      <p>

        ©Copyright 2018 海盗侠科技公司版权所有 | 上海ICP备12438170号-4

      </p>

    </div>

  </div>
</template>
<script>
import userClient from "../../api/userClient";

export default{
  data(){
    return{
      activeIndex:'1',
      user:{
        id:'',
        account:'',
        name:'',
        password:'',
        mail:'',
        phone:'',
        reserveNumber:'',
        reserveNumberCancel:'',
        state:'',
        isDeleted:'',
        gmtCreate:'',
        gmtModified:''
      },
    }
  },
  created(){
    this.getUserInfo()
  },
  methods:{
    handleSelect(index){
      if(index==1){
        this.$router.push({path:"/home"})
      }else if(index==2){
        this.$router.push({name:"home-index-search",params:{id:this.user.id}})
      }else if(index==3){
        this.$router.push({name:"home-index-history"})
      }else{
        this.$router.push({name:"home-index-userInfo"})
      }
    },
    logout(){
      this.$router.push({name:"login"})
    },
    getUserInfo(){
      userClient.getUserInfo()
        .then(response=>{
          console.log(response.data.data)
          this.user = response.data.data.user
        })
        .catch(response=>{
          this.$router.push({path:"login"})
        })
    }
  }
}
</script>
<style>
.card{
  width: 300px;
  height: 300px;
}
.gcs-footer{

  background:#222c3a;

  width: 100%;

  height: 165px;

  text-align: center;

  color: white;

  position: absolute;

}

.gcs-footer .footer-top{

  margin-top: 50px;

}

.gcs-footer a{

  color: #f0f1f1;

  text-decoration: none;

  padding: 0 10px;

  vertical-align:middle;

}

.gcs-footer a:hover{

  color: red;

  text-decoration: underline;

}

.gcs-footer p{

  height: 15px;

  color: #888888;

  margin-top: 30px;

}


</style>
